/**
 * Created by Hwa on 2017/10/19.
 */
import React from 'react';
import BaseComponent from 'basecomponent'
import './style.scss'

export class Clock extends BaseComponent{

  constructor(){
    super(...arguments);
    // This object will hold the digit elements
    this.digits = {};
    // Positions for the hours, minutes, and seconds
    this.positions = [
      'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'
    ];
    this.digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');

  }

  componentDidMount(){

    this.digit_holder = document.getElementsByClassName('digits')[0];
    let that = this;
    this.positions.forEach(function (name) {

      if(name === ':'){
        let child = document.createElement('div');
        child.setAttribute('class','dots');
        that.digit_holder.appendChild(child);
      }else {

        let pos = document.createElement('div');

        for (let i = 1;i<8;i++){
          let node = document.createElement('span')
          node.setAttribute('class','d'+i);
          pos.appendChild(node);
        }
        that.digits[name] = pos;

        that.digit_holder.appendChild(pos);
      }
    });
  }

  componentWillReceiveProps(nextProps){
    let hour = String(nextProps.hour).split('');
    let minute = String(nextProps.minute).split('');
    let second = String(nextProps.second).split('');

    this.digits.h1.setAttribute('class', this.digit_to_name[hour[0]]);
    this.digits.h2.setAttribute('class', this.digit_to_name[hour[1]]);
    this.digits.m1.setAttribute('class', this.digit_to_name[minute[0]]);
    this.digits.m2.setAttribute('class', this.digit_to_name[minute[1]]);
    this.digits.s1.setAttribute('class', this.digit_to_name[second[0]]);
    this.digits.s2.setAttribute('class', this.digit_to_name[second[1]]);

  }

  render(){
    return (<div className="digits" style={this.props.style}></div>)
  }

}





